<!--
 * @Author: Badcandy 568197314@qq.com
 * @Date: 2022-12-18 18:55:42
 * @LastEditors: jyq
 * @LastEditTime: 2023-02-12 15:50:23
 * @FilePath: \dcollege\src\views\contact\contact.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by Badcandy 568197314@qq.com, All Rights Reserved. 
-->
<template>
    <div class="main">
       <div class="header">
        <p class="mytext">通讯录</p> 
        <var-icon class="icon" name="plus-circle" @click="toaddfriend" color="#2979ff" size="33" />
       </div>
       <div class="myinput">
        <svg t="1672721018422" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2693" width="25" height="25"><path d="M862.609 816.955L726.44 680.785l-0.059-0.056a358.907 358.907 0 0 0 56.43-91.927c18.824-44.507 28.369-91.767 28.369-140.467 0-48.701-9.545-95.96-28.369-140.467-18.176-42.973-44.19-81.56-77.319-114.689-33.13-33.129-71.717-59.144-114.69-77.32-44.507-18.825-91.767-28.37-140.467-28.37-48.701 0-95.96 9.545-140.467 28.37-42.973 18.176-81.56 44.19-114.689 77.32-33.13 33.129-59.144 71.717-77.32 114.689-18.825 44.507-28.37 91.767-28.37 140.467 0 48.7 9.545 95.96 28.37 140.467 18.176 42.974 44.19 81.561 77.32 114.69 33.129 33.129 71.717 59.144 114.689 77.319 44.507 18.824 91.767 28.369 140.467 28.369 48.7 0 95.96-9.545 140.467-28.369 32.78-13.864 62.997-32.303 90.197-54.968 0.063 0.064 0.122 0.132 0.186 0.195l136.169 136.17c6.25 6.25 14.438 9.373 22.628 9.373 8.188 0 16.38-3.125 22.627-9.372 12.496-12.496 12.496-32.758 0-45.254z m-412.274-69.466c-79.907 0-155.031-31.118-211.534-87.62-56.503-56.503-87.62-131.627-87.62-211.534s31.117-155.031 87.62-211.534c56.502-56.503 131.626-87.62 211.534-87.62s155.031 31.117 211.534 87.62c56.502 56.502 87.62 131.626 87.62 211.534s-31.118 155.031-87.62 211.534c-56.503 56.502-131.627 87.62-211.534 87.62z" fill="#bfbfbf" p-id="2694" data-spm-anchor-id="a313x.7781069.0.i0" class="selected"></path></svg>
        <input class="search" type="text" placeholder="搜索"/>
       </div>
       <div class="list">
        <var-cell class="mycell" border>
          <div class="icon">
            <svg t="1672804312756" class="icon1"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14317" data-spm-anchor-id="a313x.7781069.0.i0" width="35" height="35"><path d="M572.282915 587.416406A293.701506 293.701506 0 0 1 364.586038 86.028148a293.709605 293.709605 0 0 1 415.373506 415.363381 291.777918 291.777918 0 0 1-207.676629 86.024877z m0-523.195671a229.494165 229.494165 0 0 0-162.269829 391.804491 229.502265 229.502265 0 0 0 324.539658-324.590279 227.975543 227.975543 0 0 0-162.269829-67.214212z" fill="#ffffff" p-id="14318" data-spm-anchor-id="a313x.7781069.0.i1" class="selected"></path><path d="M139.617367 1024H75.399902a499.029333 499.029333 0 0 1 499.424174-499.424174v64.217464a434.811868 434.811868 0 0 0-435.206709 435.20671z" fill="#ffffff" p-id="14319" data-spm-anchor-id="a313x.7781069.0.i2" class="selected"></path><path d="M540.158997 773.96394m10.124147 0l388.19017 0q10.124147 0 10.124147 10.124147l0 44.546247q0 10.124147-10.124147 10.124147l-388.19017 0q-10.124147 0-10.124147-10.124147l0-44.546247q0-10.124147 10.124147-10.124147Z" fill="#fdcb6e" p-id="14320" data-spm-anchor-id="a313x.7781069.0.i5" class=""></path><path d="M711.986021 602.136916m10.124147 0l44.546247 0q10.124147 0 10.124147 10.124147l0 388.190171q0 10.124147-10.124147 10.124147l-44.546247 0q-10.124147 0-10.124147-10.124147l0-388.190171q0-10.124147 10.124147-10.124147Z" fill="#fdcb6e" p-id="14321" data-spm-anchor-id="a313x.7781069.0.i3" class=""></path></svg>
          </div>
          <p>新的朋友</p>
          <var-badge class="badge" type="danger" value="188" max-value="99" />
          <template #extra>
            <var-icon class="right_icon" size="30" name="chevron-right" />
          </template>
        </var-cell>
        <var-cell class="mycell" border>
          <div class="icon_1">
            <svg t="1672806376430" class="icon1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16183" width="35" height="35"><path d="M525.5168 560.605867C637.098667 595.592533 716.8 688.128 716.8 796.808533c0 11.8784-11.127467 21.504-24.8832 21.504-13.7216 0-24.849067-9.6256-24.849067-21.504 0-114.926933-107.6224-208.110933-240.401066-208.110933s-240.401067 93.184-240.401067 208.110933c0 11.8784-11.127467 21.504-24.849067 21.504-13.755733 0-24.8832-9.6256-24.8832-21.504 0-109.4656 80.896-202.581333 193.774934-236.987733a190.6688 190.6688 0 0 1-93.661867-164.0448C236.6464 290.304 322.56 204.8 428.578133 204.8c105.984 0 191.8976 85.504 191.8976 190.976a190.702933 190.702933 0 0 1-94.958933 164.829867z m103.287467 22.4256a24.9856 24.9856 0 0 1-25.019734-24.917334c0-13.755733 11.195733-24.917333 25.019734-24.917333 66.730667 0 121.002667-54.818133 121.002666-122.6752 0-67.857067-54.272-122.709333-121.002666-122.709333a24.9856 24.9856 0 0 1-25.019734-24.917334c0-13.7216 11.195733-24.8832 25.019734-24.8832 94.549333 0 171.042133 77.312 171.042133 172.509867 0 58.709333-29.115733 110.660267-73.6256 141.824A261.188267 261.188267 0 0 1 887.466667 794.282667c0 13.755733-11.195733 24.917333-25.019734 24.917333a24.9856 24.9856 0 0 1-25.053866-24.917333c0-116.736-93.457067-211.2512-208.554667-211.2512z m-200.226134-46.114134c78.336 0 141.824-63.214933 141.824-141.141333 0-77.960533-63.488-141.175467-141.824-141.175467S286.72 317.815467 286.72 395.776c0 77.9264 63.488 141.141333 141.858133 141.141333z" fill="#ffffff" p-id="16184" data-spm-anchor-id="a313x.7781069.0.i14" class="selected"></path></svg>          </div>
          <p>学院</p>
          <template #extra>
            <var-icon class="right_icon" size="30" name="chevron-right" />
          </template>
        </var-cell>
        <var-cell class="mycell">
          <div class="icon_2">
            <svg t="1672806282662" class="icon1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15157" width="35" height="35"><path d="M510.2 517c-3.8 0-7.7-0.6-11.5-2-40.2-14.5-74.2-40.9-98.2-76.4-30.1-44.5-41.1-98-31-150.7 10.1-52.8 40.2-98.4 84.7-128.5 44.4-30.1 98-41.1 150.7-31 52.7 10.1 98.4 40.2 128.5 84.7 62.2 91.8 38.1 217-53.7 279.3-13.5 9.2-28.1 16.6-43.4 22.3-17.5 6.5-37-2.5-43.4-20.1-6.5-17.5 2.5-37 20.1-43.4 10.1-3.7 19.9-8.7 28.8-14.8 60.9-41.3 76.9-124.4 35.6-185.3-20-29.5-50.3-49.5-85.3-56.2-34.9-6.7-70.5 0.6-100 20.6s-49.5 50.2-56.2 85.3c-6.7 35 0.6 70.5 20.5 100 15.9 23.5 38.5 41 65.2 50.7 17.6 6.3 26.7 25.7 20.3 43.3C537 508.4 524 517 510.2 517zM259.2 892.5c-18.7 0-33.8-15.1-33.8-33.8 0-137.8 59.3-302 341.6-302 51.9 0 98.5 5.5 138.5 16.5 18 4.9 28.6 23.6 23.7 41.6-4.9 18-23.5 28.5-41.6 23.7-34.2-9.3-74.8-14.1-120.7-14.1C380 624.4 293 698.9 293 858.8c0.1 18.6-15.1 33.7-33.8 33.7zM216.1 563.1c-13.8 0-26.7-8.5-31.7-22.1-6.5-17.5 2.5-37 20.1-43.4 10.1-3.7 19.8-8.7 28.8-14.8 60.9-41.3 76.9-124.4 35.6-185.3-24.9-36.7-66.2-58.6-110.6-58.6h-0.2c-13 0-25.9 1.9-38.3 5.7-17.8 5.5-36.7-4.7-42.2-22.6-5.4-17.9 4.7-36.8 22.6-42.2 18.7-5.6 38.2-8.6 57.8-8.6h0.2c66.9 0 129.2 33 166.7 88.3 30.1 44.5 41.1 98 31 150.7-10.1 52.8-40.2 98.4-84.7 128.5-13.5 9.2-28.1 16.7-43.4 22.3-3.9 1.4-7.9 2.1-11.7 2.1z" fill="#ffffff" p-id="15158" data-spm-anchor-id="a313x.7781069.0.i11" class="selected"></path><path d="M253.4 678.4c-1.9 0-3.9-0.2-5.9-0.5-26.6-4.7-56.6-7.1-89.1-7.1-20.3 0-39.8 0.9-57.8 2.8-18.7 1.6-35.2-11.7-37.1-30.2-1.9-18.6 11.6-35.2 30.2-37.1 20.3-2 42-3.1 64.6-3.1 36.5 0 70.4 2.7 100.9 8.1 18.4 3.2 30.7 20.8 27.4 39.2-2.8 16.3-17.1 27.9-33.2 27.9zM898.3 547.8c-3.8 0-7.7-0.6-11.5-2-35.1-12.6-64.8-35.7-85.7-66.7-26.3-38.8-35.9-85.5-27.1-131.6 8.9-46 35.1-85.9 73.9-112.2 18.4-12.5 38.7-21.3 60.3-26.1 18.3-3.9 36.3 7.4 40.4 25.7 4.1 18.2-7.4 36.3-25.7 40.4-13.2 2.9-25.7 8.3-37.1 16-23.9 16.2-40 40.7-45.4 68.9-5.5 28.3 0.5 57 16.6 80.9 12.9 19 31.1 33.2 52.7 41 17.6 6.3 26.7 25.7 20.4 43.3-5 13.9-18 22.4-31.8 22.4zM685.7 899.4c-18.7 0-33.8-15.1-33.8-33.8 0-114.6 47.5-252.7 273.5-260.7 19-1.6 34.3 13.9 35 32.6 0.6 18.7-14 34.4-32.6 35-142 5-208.2 66.3-208.2 193.1-0.1 18.7-15.2 33.8-33.9 33.8z" fill="#ffffff" p-id="15159" data-spm-anchor-id="a313x.7781069.0.i10" class="selected"></path></svg>          </div>
          <p>群聊</p>
          <template #extra>
            <var-icon class="right_icon" size="30" name="chevron-right" />
          </template>
        </var-cell>
       </div>
       <div class="tx">
        <var-index-bar duration="300">
    <div v-for="item in 5" :key="item">
      <var-index-anchor :index="item" class="var-index-anchor__example">
        {{item}}
      </var-index-anchor>
      <var-cell class="cell">
        <div class="tou">
          <svg t="1673079548986" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3638" width="60" height="60"><path d="M0.00001 512.077A511.923 511.923 0 1 0 511.92301 0 511.974 511.974 0 0 0 0.00001 512.077z" fill="#FFFFFF" p-id="3639"></path><path d="M887.49001 857.89c-13.697-71.82-139.895-140.459-253.165-177.96-5.54-1.846-40.014-17.339-18.417-82.798 56.43-57.815 99.214-150.924 99.214-242.597 0-140.82-93.827-214.742-202.891-214.742s-202.635 73.82-202.635 214.742c0 91.98 42.784 185.45 99.317 243.162 22.059 57.712-17.34 79.207-25.65 82.08-107.73 38.834-232.903 107.73-246.702 177.96a511.307 511.307 0 1 1 887.49-346.635 507.87 507.87 0 0 1-136.56 346.788" fill="#B8D4FF" p-id="3640"></path></svg>
        </div>
        <div class="name">
          <p class="name1">阿里巴巴</p>
          <p class="name2">客服</p>
        </div>
      </var-cell>
      <var-cell class="cell">
        <div class="tou">
          <svg t="1673079548986" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3638" width="60" height="60"><path d="M0.00001 512.077A511.923 511.923 0 1 0 511.92301 0 511.974 511.974 0 0 0 0.00001 512.077z" fill="#FFFFFF" p-id="3639"></path><path d="M887.49001 857.89c-13.697-71.82-139.895-140.459-253.165-177.96-5.54-1.846-40.014-17.339-18.417-82.798 56.43-57.815 99.214-150.924 99.214-242.597 0-140.82-93.827-214.742-202.891-214.742s-202.635 73.82-202.635 214.742c0 91.98 42.784 185.45 99.317 243.162 22.059 57.712-17.34 79.207-25.65 82.08-107.73 38.834-232.903 107.73-246.702 177.96a511.307 511.307 0 1 1 887.49-346.635 507.87 507.87 0 0 1-136.56 346.788" fill="#B8D4FF" p-id="3640"></path></svg>
        </div>
        <div class="name">
          <p class="name1">阿里巴巴</p>
          <p class="name2">客服</p>
        </div>
      </var-cell>
    </div>
  </var-index-bar>
       </div>
    </div>
</template>
    
<script setup lang='ts'>
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import {getContactfriend} from '../../services/contact'

const getdata=()=>{
    getContactfriend().then(res=>{
   console.log(res)
})
} 
try {
  getdata()
} catch (error) {
  console.log(error)
}

const router = useRouter()
const toaddfriend=() =>{
  router.push("/addfriend")
}
</script>
    
<style lang="less" scoped>
    .main{
        width: 100%;
      height: 100%;
      background-color: rgb(255,255,255);
        .header{
         min-width: 100%;
         height: 70px;
         .mytext{
            font-size: 25px;
            font-weight: 650;
            margin-left: 15px;
            float: left;
         }
         .icon{
            float: right;
            margin-right: 17px;
            margin-top: 25px;
         }
      }
      .myinput{
        width: 98%;
        height: 42px;
        margin-left: 4px;
        background-color: rgb(244,245,249);
        border-radius: 20px;
        .icon{
            float: left;
            margin-left: -66px;
            margin-top: 8px;
        }
        .search{
            background-color: rgb(244,245,249);
            width: 280px;
            height: 30px;
            border: 0;
            outline: none;
            font-size: 16px;
            margin-left: -37px;
            margin-top: 5px;
        }
      }
      .list{
        .mycell{
            --cell-min-height:70px;
            .icon{
              float: left;
              width: 50px;
              height: 50px;
              background-color: #fdcb6e;
              border-radius: 10px;
              margin-top: 10px;
              .icon1{
                margin-top: 5px;
                margin-left: 8px;
              }
            }
            .icon_1{
              float: left;
              width: 50px;
              height: 50px;
              background-color: #0984e3;
              border-radius: 10px;
              margin-top: 10px;
              .icon1{
                margin-top: 5px;
                margin-left: 8px;
              }
            }
            .icon_2{
              float: left;
              width: 50px;
              height: 50px;
              background-color: #55efc4;
              border-radius: 10px;
              margin-top: 10px;
              .icon1{
                margin-top: 5px;
                margin-left: 8px;
              }
            }
            p{
            font-size: 20px;
            font-weight: 550;
            margin-left: 65px;
            }
            .var--box {
            box-sizing: border-box;
            float: right;
            margin-top: -42px;
            }
            .right_icon{
              float: right;
              color:#dfe6e9;
              margin-right:-12px;
              margin-top: 5px;
            }
        }
       
      }
      .tx{
        .cell{
          height: 80px;
          border-bottom: 1px solid rgb(244,245,249);
          .tou{
            float: left;
            margin-top: 8px;
          }
          .name{
            margin-left: 76px;
            .name1{
              font-size: 19px;
              line-height: 0%;
              font-weight: 600;
              margin-top: 29px;
            }
            .name2{
              line-height: 0%;
              margin-top: 25px;
            }
          }
        }
      }
    }     
</style>
<style>
.var-index-anchor__example {
  height: 20px;
  font-size: 13px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  transition: all 0.25s;
  background-image: linear-gradient(to right, #e7edf7, white);
  color: #2e67ba;
}
</style>